@{    Layout = null;}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ICU系统登录</title>
    <style>
        /* 变量定义 - 便于维护 */
        :root {
            --primary-color: #4aa892;
            --primary-dark: #368672;
            --primary-light: #55b9a0;
            --error-color: #e53e3e;
            --error-bg: #fff5f5;
            --text-dark: #2d3748;
            --text-medium: #4a5568;
            --text-light: #a0aec0;
            --border-color: #e2e8f0;
            --bg-color: #eaf6f2;
            --shadow-light: 0 6px 15px rgba(61, 148, 127, 0.3);
            --shadow-medium: 0 8px 20px rgba(61, 148, 127, 0.4);
            --transition-fast: all 0.2s ease;
            --transition-normal: all 0.3s ease;
            --transition-slow: all 0.6s ease;
        }

        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 全局样式 */
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', 'Roboto', sans-serif;
            background: var(--bg-color);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }

        /* 登录框主体 */
        .login-container {
            width: 100%;
            max-width: 860px;
            min-height: 560px;
            border-radius: 20px;
            background: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
            display: flex;
            transition: var(--transition-normal);
            animation: fadeInUp 0.8s ease-out;
        }

        /* 左侧品牌区域 */
        .brand-section {
            flex: 1.2;
            /* 保持原有背景图片颜色不变 */
            background: linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)), url('/img/login_btn.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        /* 品牌内容 */
        .brand-content {
            text-align: center;
            padding: 20px;
            position: relative;
            z-index: 2;
        }

        /* 品牌标题 */
        .brand-title {
            font-size: 36px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 20px;
            white-space: nowrap;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: slideInLeft 0.8s ease-out;
        }

        /* 标语 */
        .brand-slogan {
            font-size: 16px;
            opacity: 0.9;
            animation: slideInLeft 1s ease-out 0.2s both;
        }

        /* 右侧登录区域 */
        .login-section {
            flex: 1;
            background: #fff;
            padding: 50px 46px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            animation: slideInRight 0.8s ease-out;
        }

        /* 登录标题 */
        .login-title {
            font-size: 32px;
            text-align: center;
            margin-bottom: 40px;
            color: var(--text-dark);
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        /* 表单组 */
        .form-group {
            margin-bottom: 24px;
            position: relative;
        }

        /* 输入容器 */
            .input-group {
                display: flex;
                align-items: center;
                border: 1px solid var(--border-color);
                border-radius: 10px;
                height: 52px;
                padding: 0 16px;
                transition: var(--transition-normal);
                background: #ffffff;
                position: relative;
                overflow: hidden;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
            }

            /* 输入容器焦点效果 */
            .input-group:focus-within {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 3px rgba(74, 168, 146, 0.1);
                background: #ffffff;
                transform: translateY(-1px);
            }

            /* 输入容器错误状态 */
            .input-group.error {
                border-color: var(--error-color);
                background: #ffffff;
                box-shadow: 0 0 0 1px var(--error-color);
            }

            /* 图标样式 */
            .input-icon {
                width: 20px;
                height: 20px;
                margin-right: 12px;
                color: #9ca3af;
                transition: var(--transition-fast);
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .input-group:focus-within .input-icon {
                color: var(--primary-color);
            }
            
            .input-group.error .input-icon {
                color: var(--error-color);
            }

        .input-group:focus-within .input-icon {
            color: var(--primary-dark);
        }

        /* 输入框 */
        .form-input {
            flex: 1;
            border: none;
            outline: none;
            height: 100%;
            font-size: 16px;
            background: transparent;
            color: var(--text-dark);
            padding: 0;
        }

        .form-input::placeholder {
            color: var(--text-light);
            transition: var(--transition-fast);
        }

        .form-input:focus::placeholder {
            color: #cbd5e0;
        }

        /* 元信息行 */
        .form-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0 30px;
            color: var(--text-medium);
            font-size: 14px;
        }

        /* 版本号 */
        .version-info {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* 签名链接 */
        .sign-link {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition-fast);
            font-weight: 500;
            position: relative;
            padding-bottom: 2px;
        }

        .sign-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: width var(--transition-fast);
        }

        .sign-link:hover {
            color: var(--primary-dark);
        }

        .sign-link:hover::after {
            width: 100%;
        }

        /* 登录按钮 */
        .btn-login {
            width: 100%;
            height: 58px;
            border-radius: 12px;
            border: none;
            background: linear-gradient(135deg, var(--primary-light), #3d947f);
            color: #ffffff;
            font-size: 20px;
            letter-spacing: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-normal);
            box-shadow: var(--shadow-light);
            position: relative;
            overflow: hidden;
            text-indent: 8px; /* 补偿letter-spacing */
        }

        /* 按钮光效 */
        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: var(--transition-slow);
        }

        /* 按钮悬浮效果 */
        .btn-login:hover {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            box-shadow: var(--shadow-medium);
            transform: translateY(-2px);
        }

        .btn-login:hover::before {
            left: 100%;
        }

        /* 按钮点击效果 */
        .btn-login:active {
            transform: translateY(0);
            box-shadow: var(--shadow-light);
            background: linear-gradient(135deg, #3d947f, var(--primary-dark));
        }

        /* 按钮禁用状态 */
        .btn-login:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 4px 6px rgba(61, 148, 127, 0.2);
        }

        /* 错误消息 */
            .error-message {
                background: #fee2e2;
                color: #b91c1c;
                padding: 16px 20px;
                border-radius: 10px;
                margin-bottom: 24px;
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                border: 1px solid #fecaca;
                box-shadow: 0 2px 4px rgba(185, 28, 28, 0.08);
                animation: shake 0.5s ease-in-out;
            }

        /* 加载动画 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-normal);
        }

        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(74, 168, 146, 0.2);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        /* 响应式设计 */
        @@media screen and (max-width: 768px) {
            .login-container {
                flex-direction: column;
                min-height: auto;
                max-width: 100%;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            }

            .brand-section {
                min-height: 200px;
                padding: 30px;
            }

            .brand-title {
                font-size: 28px;
            }

            .brand-slogan {
                font-size: 14px;
            }

            .login-section {
                padding: 30px;
            }

            .login-title {
                font-size: 28px;
                margin-bottom: 30px;
            }
        }

        @@media screen and (max-width: 480px) {
            body {
                padding: 10px;
            }

            .brand-section, .login-section {
                padding: 20px;
            }

            .brand-title {
                font-size: 24px;
            }

            .login-title {
                font-size: 24px;
                margin-bottom: 20px;
            }

            .input-group {
                height: 50px;
                padding: 0 16px;
            }

            .btn-login {
                height: 52px;
                font-size: 18px;
            }
        }

        /* 动画定义 - 使用变量统一管理 */
        @@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @@keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @@keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @@keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        @@keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 加载动画遮罩层 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner"></div>
    </div>

    <div class="login-container">
        <!-- 左侧品牌区域 -->
        <div class="brand-section">
            <div class="brand-content">
                <h2 class="brand-title">Heyi Care Medicine</h2>
                <div class="brand-slogan">——— 以专业创造价值 ———</div>
            </div>
        </div>
        
        <!-- 右侧登录区域 -->
        <div class="login-section">
            <h1 class="login-title">ICU系统</h1>

            @if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
            {
                <div class="error-message">@ViewBag.ErrorMessage</div>
            }

            <form id="loginForm" method="post" novalidate>
                <div class="form-group">
                    <div class="input-group">
                        <!-- 用户名图标 - 使用更简洁的SVG格式 -->
                        <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                        </svg>
                        <input class="form-input" type="text" name="userNo" placeholder="请输入账号" required 
                               autocomplete="username" autofocus aria-label="账号" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <!-- 密码图标 - 使用锁形状的SVG格式 -->
                        <svg class="input-icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM7 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H7V6zm10 13H7V10h10v9z"/>
                        </svg>
                        <input class="form-input" type="password" name="password" placeholder="请输入密码" required 
                               autocomplete="current-password" aria-label="密码" />
                    </div>
                </div>

                <div class="form-meta">
                    <div class="version-info">版本号&nbsp;&nbsp;<strong>0</strong></div>
                    <a class="sign-link" href="#" id="signLink" aria-label="签名">签名</a>
                </div>

                <button type="submit" class="btn-login" id="loginButton" aria-label="登录">登  陆</button>
            </form>
        </div>
    </div>

    <script>
        // 使用立即执行函数表达式避免全局变量污染
        (function() {
            // 页面加载完成后执行
            document.addEventListener('DOMContentLoaded', function() {
                // 缓存DOM元素引用，减少DOM查询
                const loginForm = document.getElementById('loginForm');
                const loadingOverlay = document.getElementById('loadingOverlay');
                const loginButton = document.getElementById('loginButton');
                const signLink = document.getElementById('signLink');
                const usernameInput = loginForm.elements.userNo;
                const passwordInput = loginForm.elements.password;
                const usernameGroup = usernameInput.closest('.input-group');
                const passwordGroup = passwordInput.closest('.input-group');

                // 重置表单错误状态的函数
                function resetInputError(inputGroup) {
                    if (inputGroup.classList.contains('error')) {
                        inputGroup.classList.remove('error');
                    }
                }

                // 添加输入框交互效果
                [usernameInput, passwordInput].forEach((input, index) => {
                    // 输入时移除错误样式和错误提示
                    input.addEventListener('input', function() {
                        resetInputError(this.closest('.input-group'));
                        // 清除错误提示消息
                        const errorMessage = document.querySelector('.error-message');
                        if (errorMessage) {
                            errorMessage.remove();
                        }
                    });
                });

                // 触发元素动画的函数
                function triggerAnimation(element, animationName, duration) {
                    // 重置动画
                    element.style.animation = 'none';
                    // 强制重绘
                    element.offsetHeight;
                    // 应用动画
                    element.style.animation = `${animationName} ${duration} ease-in-out`;
                }

                // 表单验证和提交处理
                loginForm.addEventListener('submit', function(event) {
                    let isValid = true;
                    
                    // 验证用户名
                    if (!usernameInput.value.trim()) {
                        isValid = false;
                        usernameGroup.classList.add('error');
                    }
                    
                    // 验证密码
                    if (!passwordInput.value.trim()) {
                        isValid = false;
                        passwordGroup.classList.add('error');
                    }
                    
                    if (!isValid) {
                        event.preventDefault();
                        // 为第一个错误的输入框添加动画效果
                        const firstError = this.querySelector('.input-group.error');
                        if (firstError) {
                            triggerAnimation(firstError, 'shake', '0.5s');
                            // 聚焦到第一个错误的输入框
                            firstError.querySelector('input').focus();
                        }
                        return;
                    }
                    
                    // 显示加载动画
                    loadingOverlay.classList.add('active');
                    loginButton.disabled = true;
                    
                    // 表单提交延迟，让用户看到加载效果
                    setTimeout(() => {
                        loginForm.submit();
                    }, 300);
                });

                // 签名链接点击处理
                signLink.addEventListener('click', function(event) {
                    event.preventDefault();
                    // 使用更友好的提示方式
                    if (typeof window.alert === 'function') {
                        window.alert('签名功能即将上线，敬请期待！');
                    }
                });

                // 为密码框添加Enter键切换到提交
                passwordInput.addEventListener('keydown', function(event) {
                    // 使用更可靠的键值检测
                    if (event.key === 'Enter' || event.keyCode === 13) {
                        event.preventDefault();
                        loginButton.click();
                    }
                });

                // 添加页面可见性变化监听，防止用户切换标签页后回来出现加载状态
                document.addEventListener('visibilitychange', function() {
                    if (!document.hidden && loadingOverlay.classList.contains('active')) {
                        loadingOverlay.classList.remove('active');
                        loginButton.disabled = false;
                    }
                });
            });
        })();
    </script>
</body>
</html>
